<template>
  <div class="line">
    <div class="list">
      <div class="item" v-for="(item,index) in flowList" :key="index">
        <div class="name font-size-14 text-ellipsis">
          {{item.repairUser}}
          <q-tooltip>{{item.repairUser}}</q-tooltip>
        </div>
        <div class="detail">
          <div class="flex items-center font-14">
            <div :style="{'width': statusWidth}"><span class="padding-r-20">{{item.operation}}</span></div>
            <div>{{item.dateTime | toTime }}</div>
          </div>
          <div class="remark" style="word-break: break-all">{{`${item.remark + '' === '0' || item.remark ? '备注：' + item.remark : '' }`}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'flowsheet-common',
  props: {
    list: Array,
    statusWidth: {
      type: String,
      default: '120px'
    },
    isInit: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    flowList () {
      return this.isInit ? this.list : this.list.map(v => {
        const item = {}
        item.repairUser = v.user
        item.operation = v.step
        item.dateTime = v.date
        item.remark = v.stepRemark
        return item
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .line{
    margin-left 10px
    border-left 1px solid #D3D3D3
    .list{
      margin-left -10px
      width calc(100% + 10px)
      .name{
        max-width 100px
        padding-right 20px
        float left
        background-color #ffffff
      }
      .detail{
        padding-left 100px
        .remark{
          color #999
          padding-bottom 10px
          padding-top 5px
        }
      }
      & .item:last-child{
        .detail{
          background-color #ffffff
          .remark{
            padding-bottom 0
          }
        }
      }
    }
  }
</style>
